<script setup lang="ts">
import MessageItem from './MessageItem.vue'

interface MessageType {
  type: 'user' | 'ai';
  content: string;
  hasThinking?: boolean;
  thinking?: {
    content: string;
    done: boolean;
    time: number;
    startTime?: number;
  };
  hasReferences?: boolean;
  references?: any[];
  referenceCount?: number;
}

const props = defineProps({
  messages: {
    type: Array as () => MessageType[],
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['open-references'])

const handleOpenReferences = (references: any[]) => {
  emit('open-references', references)
}
</script>

<template>
  <div class="message-list">
    <MessageItem
      v-for="(msg, index) in messages"
      :key="index"
      :type="msg.type"
      :content="msg.content"
      :has-thinking="msg.hasThinking"
      :thinking="msg.thinking"
      :has-references="msg.hasReferences"
      :references="msg.references"
      :reference-count="msg.referenceCount"
      :is-loading="loading"
      :is-last="index === messages.length - 1"
      @open-references="handleOpenReferences"
    />
  </div>
</template>

<style lang="scss" scoped>
.message-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
